<template>
  <div>
    <el-container>
      <el-header>每月盘存管理</el-header>
      <el-main>
        <el-row :gutter="20">
          <el-input-number v-model="year" @change="handleDateChange" :min="2000" :max="2100" label="请输入查询年份"></el-input-number>年
          <el-input-number v-model="month" @change="handleDateChange" :min="1" :max="12" label="请输入查询月份"></el-input-number>月
          <el-col :span="24">
            <!-- 入库审核信息表格 -->
            <el-table :data="monthTotals" style="width: 100%">
              <el-table-column prop="type" label="废品小类id" width="180"></el-table-column>
              <el-table-column prop="number" label="废品小类数量" width="180"></el-table-column>
              <el-table-column prop="unit" label="废品小类单位" width="180"></el-table-column>
              <el-table-column prop="totalprice" label="收购花费的金额" width="180" ></el-table-column>
            </el-table>
          </el-col>
        </el-row>
      </el-main>
    </el-container>

    <!-- 分页组件 -->
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page.pageNum"
      :page-sizes="[3, 4, 5]" :page-size="page.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="page.total">
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: "StationBoss",
  data() {
    const currentDate = new Date();
    const currentYear = currentDate.getFullYear();
    const currentMonth = currentDate.getMonth() + 1; // 注意：JavaScript 中月份是从 0 开始的，所以要加 1

    return {
      year: currentYear,
      month: currentMonth,
      showUnHandle: true,
      showDetailWindow: false,
      loading: false,
      monthTotals: [],
      detailList: [],
      page: {
        pageNum: 1,
        pageSize: 5,
        total: 0
      },
      stationId: null
    };
  },
  mounted() {
    this.stationId = localStorage.getItem('stationId');
    this.loadAllMonthTotal(this.page.pageNum, this.page.pageSize);
  },
  methods: {
    handleDateChange() {
      this.loadAllMonthTotal(this.page.pageNum, this.page.pageSize);
    },
    handleSizeChange(pageSize) {
      this.page.pageSize = pageSize;
      this.loadAllMonthTotal(this.page.pageNum, this.page.pageSize);
    },
    handleCurrentChange(pageNum) {
      this.page.pageNum = pageNum;
      this.loadAllMonthTotal(this.page.pageNum, this.page.pageSize);
    },
    loadAllMonthTotal(pageNum, pageSize) {
      this.$http.post("/depot/monthTotal/findByStationIdAndMonthPage", {
        stationId: this.stationId,
        year: this.year,
        month: this.month,
        pageNum: pageNum,
        pageSize: pageSize
      }).then(response => {
        if(response.data.code!=200){
          this.$message.error(response.data.message)
        }
        const result = response.data.data;
        this.page.pageNum = result.current;
        this.page.pageSize = result.size;
        this.page.total = result.total;
        this.monthTotals = result.records;
      });
    }
  }
};
</script>

<style scoped>
</style>
